<template>
    <div class="box">
        <img src="../assets/index.png" alt="">
        <div class="content">
            <div class="bg">
                <div class="title">
                    <img src="../assets/wddx.png" alt="">
                    <span>我的大学</span>
                </div>
                <div class="nav">
                    <div class="item" v-for="item in items" :key="item">
                        <img :src="item.img" alt="">
                        <span>{{ item.title }}</span>
                    </div>
                </div>
                <!--校园风采模块 -->
                <div class="xyfc">
                    <div>校园风采</div>
                    <div>查看更多<img src="../assets/arrow_right.png" alt=""></div>
                </div>
                <div class="xyfc-img">
                    <div>
                        <img src="../assets/xyfc_1.png" alt="">
                    </div>
                    <div>
                        <img src="../assets/xyfc_2.png" alt="">
                        <img src="../assets/xyfc_3.png" alt="">
                    </div>
                </div>
                <div class="xyfc-zyfw">
                    <div>专业服务</div>
                    <div class="xyfw-zyfw-content">
                        <div>
                            <img src="../assets/01.png" alt="">
                            <p>技能提升</p>
                        </div>
                        <div>
                            <img src="../assets/02.png" alt="">
                            <p>学历提升</p>
                        </div>
                        <div>
                            <img src="../assets/03.png" alt="">
                            <p>报考指南</p>
                        </div>
                    </div>
                </div>
            </div>
                   <!-- 我的城 -->
         <div class="bg">
            <div class="title">
                <img src="../assets/wdc.png" alt="">
                <span>我的城</span>
            </div>
            <div class="xyytf">
                    <div>相约游团风</div>
                    <div>查看更多<img src="../assets/arrow_right.png" alt=""></div>
                </div>
            <div class="xyytf-content">
                <div class="xyytf-content-lef">
                    <img src="../assets/xyytf01.png" alt="">
                </div>
                <div class="xyytf-content-right">
                    <div class="title">龙山源果木专业合作社</div>
                    <div class="tag">
                        <span>绿色天然</span>
                        <span>水果采摘</span>
                        <span>有机</span>
                        <span>生态</span>
                    </div>
                    <div class="time">
                        <img src="../assets/time.png" alt="">
                        <span>08:00-17:00</span>
                    </div>
                    <div class="address">
                        <img src="../assets/address.png" alt="">
                        <span>团风县回龙山镇沙畈村、罗家咀村</span>
                    </div>
                    <div class="btn">
                        <button>了解详情</button>
                    </div>
                </div>
            </div>
                        <div class="xyytf-content">
                <div class="xyytf-content-lef">
                    <img src="../assets/矩形 6 (1).png" alt="">
                </div>
                <div class="xyytf-content-right">
                    <div class="title">童宝草莓采摘园</div>
                    <div class="tag">
                        <span>红颜奶油</span>
                        <span>亲子采摘</span>
                        <span>有机</span>
                        <span>生态</span>
                    </div>
                    <div class="time">
                        <img src="../assets/time.png" alt="">
                        <span>09:00-17:30</span>
                    </div>
                    <div class="address">
                        <img src="../assets/address.png" alt="">
                        <span>黄州区堵城镇</span>
                    </div>
                    <div class="btn">
                        <button>了解详情</button>
                    </div>
                </div>
            </div>
            <!-- 探店 -->
            <div class="xyytf tdsss">
                <div>探店食宿</div>
                <div>查看更多<img src="../assets/arrow_right.png" alt=""></div>
                </div>
                <div class="tdss-box">
                    <div class="tdss-item">
                        <img src="../assets/tdss1.png" alt="">
                        <div class="tdss-item-content">
                            <div class="title">团风觅怡酒店</div>
                            <div class="star">
                                <img src="../assets/star.png" alt="">
                                <img src="../assets/star.png" alt="">
                                <img src="../assets/star.png" alt="">
                            </div>
                            <div class="price">
                                <span><span>120-160</span>元/晚</span>
                                <button>订购</button>
                            </div>
                        </div>
                    </div>
                    <div class="tdss-item">
                        <img src="../assets/tdss2.png" alt="">
                        <div class="tdss-item-content">
                            <div class="title">团风茉莉花酒店</div>
                            <div class="star">
                                <img src="../assets/star.png" alt="">
                                <img src="../assets/star.png" alt="">
                                <img src="../assets/star.png" alt="">
                            </div>
                            <div class="price">
                                <span><span>128-178</span>元/晚</span>
                                <button>订购</button>
                            </div>
                        </div>
                    </div>
                </div> 
                <!-- 摄影定制 -->
            <div class="xyytf sydz">
                <div>摄影定制</div>
                <div>查看更多<img src="../assets/arrow_right.png" alt=""></div>
            </div>
                <div class="sydz-container">
                <div class="sydz-big">
                <img src="../assets/2.jpg.png" alt="">
                <div class="label">产品拍摄</div>
            </div>
                <div class="sydz-small-group">
                <div class="sydz-small">
                <img src="../assets/分组 3.png" alt="">
                <div class="label">节日写真</div>
            </div>
                <div class="sydz-small">
                <img src="../assets/毕业写真2.png.png" alt="">
                <div class="label">校园写真</div>
                    </div>
                    </div>
                </div>
                <!-- 网红小店 -->
            <div class="xyytf tdss" @click="btnClick">
                <div>网红小店</div>
                <div>查看更多<img src="../assets/arrow_right.png" alt=""></div>
            </div>
            </div> 
        </div>
    </div>
</template>
<script setup>
import icon1 from '../assets/icon1.png';
import icon2 from '../assets/icon2.png';
import icon3 from '../assets/icon3.png';
import icon4 from '../assets/icon4.png';

//导入useRouter
import { useRouter } from 'vue-router';
import { ref } from 'vue'

//使用useRouter
const router = useRouter();
console.log(router);

const items = ref([
    { img: icon1, title: '学校简介' },
    { img: icon2, title: '专业介绍' },
    { img: icon3, title: '预约进校' },
    { img: icon4, title: '图书馆预约' },
])
console.log(items.value);

//查看更多网红小店点击事件
const btnClick = () => {
    console.log('btnClick');
    router.push({path:'/whxdList'});
    
}
</script>
<style scoped>
.box>img {
    width: 100%;
}

.content {
    padding: 6px 20px 4px;
}

.content>.bg {
    background-color: #fff;
    border-radius: 16px;
}

.content>.bg>.title {
    display: flex;
    align-items: center;
}

.content>.bg>.title>img {
    margin-right: 4px;
}

.content>.bg>.title>span {
    font-size: 18px;
    font-weight: bold;
    color: #784E23;
}

.content>.bg>.nav {
    margin-top: 14px;
    display: flex;
    justify-content: space-evenly;
}

.content>.bg>.nav>.item {
    display: flex;
    flex-direction: column;
    align-items: center;

}

.content>.bg>.nav>.item img {
    width: 56px;
}

.content>.bg>.nav>.item span {
    margin-top: 12px;

}

/* 校园风采 头部 */

.content .bg .xyfc {
    display: flex;
    justify-content: space-between;
    padding: 0 10px;
    margin-top: 20px;
}

.content .bg .xyfc>div:first-child 
.xyfc-zyfw>div:first-child{
    font-size: 14px;
    color: #784e23;
}

.content .bg .xyfc>div:last-child {
    font-size: 12px;
    color: #555555;
}

/* 校园风采 图片 */
.content .bg .xyfc-img {
    display: flex;
    justify-content: space-between;
    padding: 0 6px;
}

.content .bg .xyfc-img>div {
    width: 48.1%;
    height: 128px;
    /* background-color: #ccc; */
    /* overflow: hidden;
    border-radius: 10px; */
}

.content .bg .xyfc-img>div:last-child>img {
    height: 62px;
}

.content .bg .xyfc-img>div>img {
    width: 100%;
    height: 100%;
    border-radius: 10px;
}

.xyfw-zyfw-content {
    display: flex;
}

.xyfw-zyfw-content div {
    width: 30%;
    padding: 10px;
}

.xyfw-zyfw-content div img {
    width: 100%;
}

.xyfw-zyfw-contet div p {
    text-align: center;
    margin: 0;
}
/* 我的城 */
.content>.bg:nth-child(2){
    margin-top: 8px;
}

.content>.bg>.xyytf {
    margin-top: 14px;
    padding: 2px 6px 2px 20px;
    display: flex;
    justify-content: space-between;
    background: linear-gradient(90deg,rgba(243, 252, 242, 0) 0%, rgba(214, 171, 129, 1) 100%);
}

.content>.bg.xyytf>div {
    color: #784e23;
}

.content>.bg>.xyytf img {
    margin-left: 10px;
}

.content>.bg>.xyytf-content {
    display: flex;
    background-color: #fff;
    border-radius: 8px;
    border: 0.5px solid rgba(120, 78, 35, 1);
    padding: 6px;
    margin-top: 6px;
}

.content>.bg>.xyytf-content>.xyytf-content-lef {
    width: 40%;
    display: flex;
    align-items: center;
}

.content>.bg>.xyytf-content>div.xyytf-content-lef img {
    width: 100%;
}

.content>.bg>.xyytf-content>.xyytf-content-right {
    width: 60%;
    font-size: 12px;
    padding-left: 6px;
}

.content>.bg>.xyytf-content>.xyytf-content-right .title {
    font-size: 16px;
    font-weight: bold;
    color: #000;
}

.content>.bg>.xyytf-content>.xyytf-content-right .tag {
    margin: 8px 0;
}

.content>.bg>.xyytf-content>.xyytf-content-right .tag span {
    background-color: #fbf8f8;
    margin-left: 4px;
    padding: 2px;
}

.content>.bg>.xyytf-content>.xyytf-content-right .tag span:first-child {
    margin-left: 0;
}

.content>.bg>.xyytf-content>.xyytf-content-right .time,
.address {
    display: flex;
    align-items: center;
}

.content>.bg>.xyytf-content>.xyytf-content-right .btn {
    display: flex;
    justify-content: flex-end;
    margin-top: 8px;
}

.ontent>.bg>.xyytf-content>.xyytf-content-right .btn button {
    width: 100px;
    height: 30px;
    border-radius: 20px;
    background-color: rgba(120, 78, 35, 1);
    color: #fff;
}

/* 探店食宿 */
.content>.bg .tdss-box {
    display: flex;
    justify-content: space-between;
}

.content>.bg .tdss-box .tdss-item {
    width: 48%;
    background-color: #fff6eb;
    border-radius: 10px;
}

.content>.bg .tdss-box .tdss-item>img {
    width: 100%;
    height: 120px;
}

.content>.bg .tdss-box .tdss-item .tdss-item-content {
    padding: 0 12px 10px 7px;
}

.content>.bg .tdss-box .tdss-item .tdss-item-content .title{
    font-size: 12px;
}

.content>.bg .tdss-box .tdss-item .tdss-item-content .star>img{
    margin-right: 3px;
}

.content>.bg .tdss-box .tdss-item .tdss-item-content .price{
    font-size: 12px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.content>.bg .tdss-box .tdss-item .tdss-item-content .price>button{
    border-radius: 20px;
    background-color: rgba(120, 78, 35, 1);
    color: #fff;
    padding: 0px 8px;
}
/* 摄影定制 */
/* 摄影定制容器 */
.sydz-container {
  display: flex;
  justify-content: space-between;
  padding: 0 6px;
  margin-top: 10px;
}

/* 大图片区域 */
.sydz-big {
  width: 48%;
  position: relative;
}

.sydz-big img {
  width: 100%;
  height: 180px;
  border-radius: 10px;
}

/* 图片标签 */
.label {
  position: absolute;
  bottom: 10px;
  left: 10px;
  background-color: rgba(0, 0, 0, 0.5);
  color: #fff;
  padding: 2px 8px;
  border-radius: 4px;
}

/* 小图片组区域 */
.sydz-small-group {
  width: 48%;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

/* 小图片容器 */
.sydz-small {
  width: 100%;
  position: relative;
  margin-bottom: 10px;
}

.sydz-small:last-child {
  margin-bottom: 0;
}

.sydz-small img {
  width: 100%;
  height: 85px;
  border-radius: 10px;
}
/* 网红小店容器 */
.whxd-box {
  display: flex;
  justify-content: space-between;
  padding: 0 6px;
  margin-top: 10px;
}

/* 网红小店项 */
.whxd-item {
  width: 48%;
  background-color: #fff;
  border-radius: 10px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

.whxd-item img {
  width: 100%;
  height: auto;
}

/* 网红小店信息 */
.whxd-info {
  padding: 8px;
}

.whxd-info .title {
  font-size: 16px;
  font-weight: bold;
  color: #000;
  margin-bottom: 4px;
}

.whxd-info .desc {
  font-size: 14px;
  color: #555;
}

.whxd-info .star img {
  width: 16px;
  height: 16px;
  margin-right: 2px;
}

.whxd-info .price {
  font-size: 14px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 4px;
}

.whxd-info .price button {
  border-radius: 20px;
  background-color: rgba(120, 78, 35, 1);
  color: #fff;
  padding: 2px 8px;
  border: none;
  cursor: pointer;
}
</style>